import React from 'react';
import {connect} from 'dva/index';
import {Button, Col, Form, Modal, Popconfirm, Row, Table} from 'antd';
import LocalFeeItemDetail from './localFeeItemDetail';
import RightConstants from '../../../utils/RightConstants';
import RightBox from '../../common/rightBox';

const FormItem = Form.Item;
const R = require("ramda");
const localFeeDetail = Form.create()(class LocalFeeDetail extends React.Component{
        constructor(props){
            super(props);
            this.state = { 
                open: false,
                localFeeId: null
            }
        }

        handleOpen = (id) =>{
          this.setState({ open: true, localFeeId: id });
        }
        onEdit = (id, localFeeId, disabled) => {
            this.props.dispatch({
                type: 'feeItem/getAllFeeItems',
                payload: { localFeeId: localFeeId , type : 1}
            });

            if(R.isNil(id)){
                this.localFeeItemDetail.handleOpen(localFeeId, disabled, false, false);

            }else {
                this.props.dispatch({
                    type: 'localFeeDetail/getLocalFeeDetailById',
                    payload: {
                        id: id,
                        onSuccess: (val) => {
                            let disableCase = R.equals("1", val.unit) ? false : true;//1箱 2票
                            let disableJob = R.equals("2", val.unit) ? false : true;
                            this.localFeeItemDetail.handleOpen(localFeeId, disabled, disableCase, disableJob);
                        }
                    }
                });
            }

        }

        handleDelete = id => {
            this.props.dispatch({
                type: 'localFeeDetail/deleteLocalFeeDetailById',
                payload: {
                    id,
                    onSuccess: this.handleSearch
                }
            })
        }

        handleCancel = () => {
            this.setState({ open: false });
            this.props.form.resetFields();
        }

        handleSearch = flag => {
            let newPage = this.props.localFeeDetail.page;
            if (flag) newPage.page = 1;
            let localId = this.state.localFeeId
            this.props.dispatch({
                type: 'localFeeDetail/getListForPage',
                payload: {
                    localFeeId: localId,
                    page: newPage
                }
            });
        };
        
        columns = [
            {title: '费用名称', key:'name',
                render: record => {
                    return <span>{record.name}({record.code})</span>
                }
            },
            {title: '币种', key: 'currency', dataIndex: 'currency'},
            {title: '20GP', dataIndex: 'fee20gp', key: 'fee20gp'},
            {title: '40GP', dataIndex: 'fee40gp', key: 'fee40gp'},
            {title: '40HQ', dataIndex: 'fee40hq', key: 'fee40hq'},
            {title: '单票', dataIndex: 'feeSingle', key: 'feeSingle'},
            {title: '操作', key: 'key_oprator',
                render: record => {
                    let editLink = <RightBox resource={RightConstants.COSTMAINTENANCE.COSTMAINTENANCE_LOCALFEEITEM_EDIT} split={true}><a href="#" onClick={this.onEdit.bind(this, record.id, this.state.localFeeId, false)}>编辑</a></RightBox>
                    let deleteLink = <Popconfirm onConfirm={this.handleDelete.bind(this, record.id)} okText="是" cancelText="否"
                        placement="leftTop" title={'数据删除后将不可以恢复，是否继续删除?'}>
                        <a href="#">删除</a>
                    </Popconfirm>
                    deleteLink = <RightBox resource={RightConstants.COSTMAINTENANCE.COSTMAINTENANCE_LOCALFEEITEM_DELETE} split={true}>{deleteLink}</RightBox>
                    let viewLink = <a href="#" onClick={this.onEdit.bind(this, record.id, this.state.localFeeId, true)}>查看</a>
                    return (
                        <span>{editLink}{deleteLink}{viewLink}</span>
                    );
                }
            }
        ];
                                              
            render() {
                let formItemLayout = { labelCol: { span: 7 }, wrapperCol: { span: 17 } };
                const { getFieldDecorator } = this.props.form;
                let pagination = {
                    showTotal: total => `共 ${total} 条数据`,
                    pageSize: this.props.localFeeDetail.page.size,
                    current: this.props.localFeeDetail.page.page,
                    total: this.props.localFeeDetail.page.totalRow,
                    showSizeChanger: true,
                    onShowSizeChange: (current, size) => {
                        let newPage = this.props.localFeeDetail.page;
                        newPage.size = size;
                        newPage.page = 1;
                        this.props.dispatch({
                            type: 'localFeeDetail/getListForPage',
                            payload: {
                                ...this.props.form.getFieldsValue(),
                                page: newPage
                            }
                        });
                    },
                    onChange: (pageNumber, pageSize) => {
                        let newPage = this.props.localFeeDetail.page;
                        newPage.page = pageNumber;
                        this.props.dispatch({
                            type: 'localFeeDetail/getListForPage',
                            payload: {
                                ...this.props.form.getFieldsValue(),
                                page: newPage
                            }
                        });
                    }
                }

                let footer = [
                    <Button key="cancel" size="large" loading={this.props.loading} onClick={this.handleCancel.bind(this)}>{"取消"}</Button>
                ];
                return(
                <div>
                    {this.state.open ?                        
                    <Modal maskClosable={false} visible={this.state.open} width={850} title={"本地费用（附加费）"} confirmLoading={this.props.loading} onCancel={ this.handleCancel.bind(this)} footer={footer}>
                        <Form>
                            <Row>
                                <Col span={12}>
                                    <FormItem>
                                        <RightBox resource={RightConstants.COSTMAINTENANCE.COSTMAINTENANCE_LOCALFEEITEM_ADD }><Button type="primary" icon="plus" size={'default'} style={{ marginRight: 5 }} onClick={this.onEdit.bind(this, null, this.state.localFeeId, false)}>增加本地费用（附加费）</Button></RightBox>
                                    </FormItem>
                                </Col>
                            </Row>
                        </Form>
        
                        <Table loading={this.props.loading} rowKey='id'
                               dataSource={this.props.localFeeDetail.list}
                               columns={this.columns} bordered={true}
                               size={'middle'} pagination={pagination} />
                        <LocalFeeItemDetail wrappedComponentRef={(inst) => this.localFeeItemDetail = inst} refreshList={this.handleSearch} freightFeeId={this.state.freightFeeId}/>
                    </Modal>
                    :""}
                </div>
                )
            }
        })
       
function mapStateToProps(state){
    return{
        loading: state.loading.models.localFeeDetail, localFeeDetail: state.localFeeDetail
    };
}

export default connect(mapStateToProps)(localFeeDetail);